@extends('common.base-master')

@section('html-head')
@endsection

@section('html-body')
    <div class="signup-page">
        <div class="header">
            <div class="bg-meetboluoji"></div>
            {{--<!-- 已注册提示，先隐藏 -->--}}
            <div class="worning-text hidden" style="font-size: .6rem;"></div>
        </div>

        <!-- 登陆页面内容 -->
        <div class="login-form">
            <form class="login-box">
                <div class="phone-con">
                    <span class="icon bg-phone_m_icon"></span>
                    <input type="text" name="phone" id="phone" placeholder="请输入手机号">
                    <span class="error-icon bg-tanhao_icon hidden" id="error-icon-phone"></span>
                </div>
                <div class="password-con">
                    <span class="icon bg-lock_m_icon"></span>
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                    <span class="error-icon bg-tanhao_icon hidden"  id="error-icon-password"></span>
                </div>
                <div class="submit-btn" id="btn_login" style="text-align: center;line-height: 52px;">登录</div>
            </form>
            <div class="other-links">
                <a href="{{route('Home.Auth.register')}}">还有没有账号，注册一个？</a>
                <a href="{{route('Home.Auth.forgetPassword')}}">忘记密码？</a>
            </div>
            <span class="bg-zhiwen_icon"></span>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var phoneCheck    = false;
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;

            $('#phone').blur(function () {
                 var phone = $('#phone').val();
                 if(phone == ''){
                     $('.worning-text').html('手机号不能为空！');
                     $('.worning-text').removeClass('hidden');
                     $('#error-icon-phone').removeClass('hidden');
                     return false;
                 }

                if (!myreg.test(phone)) {
                    $('.worning-text').html('手机号格式错误！');
                    $('.worning-text').removeClass('hidden');
                    $('#error-icon-phone').removeClass('hidden');
                    return false;
                }

                $('.worning-text').html('');
                $('.worning-text').addClass('hidden');
                $('#error-icon-phone').addClass('hidden');
                phoneCheck = true;
            });

            $('#btn_login').click(function () {
                if(phoneCheck){
                    var password = $('#password').val();
                    var phone    = $('#phone').val();

                    $.ajax({
                        url:"{{route('Api.Auth.signIn')}}",
                        type:'post',
                        dataType:'json',
                        data:{
                            phone:phone,
                            password:password
                        },
                        success:function (obj) {
                            if(obj.level == 'success'){
                                $('.worning-text').addClass('hidden');
                                $('#error-icon-phone').addClass('hidden');
                                $('#error-icon-password').addClass('hidden');
                                $.toast("登录成功",function() {
                                    window.location.href="{{route('Home.User.baibaoxiang')}}";
                                });
                            }else {
                                $('.worning-text').html(obj.message);
                                $('.worning-text').removeClass('hidden');
                                $('#error-icon-phone').removeClass('hidden');
                                $('#error-icon-password').removeClass('hidden');
                            }
                        },
                        error:function (obj) {
                            console.log(obj);
                        }
                    });
                }else {
                    $('#phone').blur();
                }
            });
        });
    </script>
@endsection